<!DOCTYPE html>

<html>
	<head>
		<meta charset="utf-8" />
		<title>加载带材质的3mf模型 - iThreeJS</title>
		<style type="text/css">
			* {margin:0;padding:0;}
			html, body {overflow:hidden;}
			#loading {position:absolute;left:50%;top:50%;z-index:99;
				margin-left:-100px;margin-top:-100px;width:200px;height:200px;
				line-height:200px;text-align:center;font-size:18px;color:#fff;}
			#loadingPercent {font-size:96px;}
		</style>
	</head>
	
	<body>
		<div id="loading"><span id="loadingPercent">0</span>%</div>
		
		<script type="text/javascript" src="../../assets/js/three.min.js"></script>
		<script type="text/javascript" src="../../assets/js/libs/jszip.min.js"></script>
		<script type="text/javascript" src="../../assets/js/controls/OrbitControls.js"></script>
		<script type="text/javascript" src="../../assets/js/loaders/3MFLoader.js"></script>
		<script type="text/javascript">
			//全局变量
			const w = window.innerWidth;
			const h = window.innerHeight;
			const r = w / h;
			const s = 300; //视野范围控制系数
			
			//渲染器
			const renderer = new THREE.WebGLRenderer({
				antialias: true
			});
			renderer.setSize(w, h);
			renderer.setClearColor(0x000000, 1);
			document.body.appendChild(renderer.domElement);
			
			//场景
			const scene = new THREE.Scene();
			//scene.fog = new THREE.Fog(0xa0a0a0, 10, 500);
			
			//辅助坐标系
			//const axis = new THREE.AxesHelper(300);
			//scene.add(axis);
			
			//照相机
			const camera = new THREE.PerspectiveCamera(35, r, 1, 500);
			//const camera = new THREE.OrthographicCamera(-s*r, s*r, s, -s, 1, 1000);
			camera.position.set(-50, 40, 50);
			scene.add(camera);
			
			//光照
			const aLight = new THREE.AmbientLight(0x404040, 1);
			scene.add(aLight);
			const dLight = new THREE.DirectionalLight(0xffffff, 1);
			scene.add(dLight);
			const pLight = new THREE.PointLight(0xffffff, 0.8);
			pLight.position.set(-50, 40, 50);
			camera.add(pLight);
			
			//控制器
			const ctrl = new THREE.OrbitControls(camera, renderer.domElement);
			
			//渲染函数
			function render() {
				//console.log("Render...");
				renderer.render(scene, camera);
				
				requestAnimationFrame(render);
			}
			
			//加载管理器
			const loadMgr = new THREE.LoadingManager();
			//Called when loading starts
			loadMgr.onStart = function(url, itemsLoaded, itemsTotal) {
				console.log("Loading Start!");
			};
			//Called when an item is complete
			loadMgr.onProgress = function(url, itemsLoaded, itemsTotal) {
				console.log("Loading Items: ", itemsLoaded, " / ", itemsTotal);
			};
			//Called when all loading is completed
			loadMgr.onLoad = function() {
				console.log("Loading Complete!");
				render();
			};
			//Called when any item errors
			loadMgr.onError = function(url) {
				console.log("Loading Error!");
			};
			
			//加载模型
			const loader = new THREE.ThreeMFLoader(loadMgr);
			loader.load(
				"../../assets/models/3mf/truck.3mf",
				function(obj) {
					//console.log("Model: ", obj);
					//z-up conversion
					obj.quaternion.setFromEuler(new THREE.Euler(- Math.PI / 2, 0, 0 ));
					obj.position.y = -15;
					scene.add(obj);
				},
				function(xhr) {
					//console.log("Loaded: ", (xhr.loaded / xhr.total * 100).toFixed(0), "%");
					
					let per = (xhr.loaded / xhr.total * 100).toFixed(0);
					if(per < 100) {
						document.getElementById("loadingPercent").innerHTML = per;
					}else {
						document.getElementById("loading").remove();
					}
				},
				function(err) {
					console.log("Error: ", err);
				}
			);
					 
			//监听浏览器窗口大小变化
			window.addEventListener("resize", onWindowResize, false);
			
			//浏览器窗口大小变化时，调整照相机后重新渲染
			function onWindowResize() {
				//console.log("Resize...");
				
				//适用于透视投影
				camera.aspect = window.innerWidth / window.innerHeight;
				
				//适用于正交投影
				//let r = window.innerWidth / window.innerHeight;
				//camera.left = -s * r;
				//camera.right = s * r;
				
				//Updates the camera projection matrix. 
				//Must be called after any change of parameters.
				camera.updateProjectionMatrix();
				
				renderer.setSize(window.innerWidth, window.innerHeight);
				render();
			}
		</script>
	</body>
</html>